// 导入API请求方法和渲染工具函数
import { GetUsers, DeleteUser, AddUser, EdiUser } from "./myfetch.js";
import { render } from "./utils.js";

// 获取表格DOM元素
const oTab = document.querySelector("#tab");

/**
 * 初始化加载用户数据并渲染表格
 * 使用await等待异步请求完成
 */
const data = await GetUsers(); // 获取用户数据
oTab.innerHTML = render(data); // 调用render函数生成HTML并插入表格

// 获取删除按钮并添加点击事件
const btn_del = document.querySelector("#del");
btn_del.addEventListener("click", async () => {
    try {
        // 尝试删除ID为2的用户
        let result = await DeleteUser(2);
        console.log("删除成功:", result);
        
        // 删除成功后刷新表格数据
        const newData = await GetUsers();
        oTab.innerHTML = render(newData);
    } catch (error) {
        console.error("删除失败:", error);
        // 实际项目中可以添加用户提示，如alert或Toast
    }
});

// 获取添加按钮并添加点击事件
const btn_add = document.querySelector("#add");
btn_add.addEventListener("click", async () => {
    // 准备要添加的用户数据
    let user = {
        "name": "周杰伦",
        "age": 20
    }
    
    try {
        // 尝试添加新用户
        let result = await AddUser(user);
        console.log("添加成功:", result);
        
        // 添加成功后刷新表格数据
        const newData = await GetUsers();
        oTab.innerHTML = render(newData);
    } catch (error) {
        console.error("添加失败:", error);
    }
});

// 获取编辑按钮并添加点击事件
const btn_eldi = document.querySelector("#updata");
btn_eldi.addEventListener("click", async () => {
    try {
        // 尝试编辑ID为2的用户，修改name字段
        let result = await EdiUser(2, { name: "及你太美" });
        console.log("编辑成功:", result);
        
        // 编辑成功后刷新表格数据
        const newData = await GetUsers();
        oTab.innerHTML = render(newData);
    } catch (error) {
        console.error("编辑失败:", error);
    }
});

/* 
 * 注意事项：
 * 1. 所有按钮操作后都重新获取最新数据并刷新表格，确保数据一致性
 * 2. 使用try-catch捕获可能的网络请求错误
 * 3. 实际项目中建议添加加载状态提示（如禁用按钮+加载动画）
 * 4. ID硬编码为2仅用于演示，实际应从表格行数据动态获取
 * 5. 可考虑使用事件委托优化多个按钮的事件监听
 */